<div class="reset-pwd">
  <nz-modal
    [nzVisible]="nzVisible"
    (nzOnCancel)="nzOnCancel()"
    [nzContent]="form"
    nzTitle="重置密码"
    (nzOnOk)="nzOnOk()"
    [nzOkLoading]="nzLoading"
    [nzCancelLoading]="nzLoading"
  >
  </nz-modal>
</div>

<ng-template #form>
  <form class="reset-pwd-form" [formGroup]="resetPwdForm">
    <div class="form-item">
      <label>绑定手机号</label>
      <div class="ipt">
        <input formControlName="phone" type="text" nz-input 
          placeholder="请输入手机号">
        <ng-container *ngIf="phone?.touched && phone?.errors">
          <app-err-msg>
            {{ phone?.errors?.['required'] ? '手机号不能为空' : '' }}
          </app-err-msg>
          <app-err-msg>
            {{ phone?.errors?.['pattern'] ? '手机号格式不正确' : '' }}
          </app-err-msg>
        </ng-container>
      </div>
    </div>

    <div class="form-item">
      <label>新密码</label>
      <div class="ipt">
        <input type="password" (ngModelChange)="passwordChange($event)" formControlName="password" nz-input 
          placeholder="请输入新密码: 需包含特殊字符大小写字母及数字">
          <ng-container *ngIf="password?.touched && password?.errors">
            <app-err-msg>
              {{ password?.errors?.['required'] ? '请输入新密码' : '' }}
            </app-err-msg>
            <app-err-msg>
              {{ password?.errors?.['pattern'] ? '密码需包含特殊字符大小写字母及数字' : '' }}
            </app-err-msg>
          </ng-container>
      </div>
    </div>
    <div class="form-item">
      <label>确认新密码</label>
      <div class="ipt">
        <input type="password" (ngModelChange)="passwordChange($event)" formControlName="confirmPassword" nz-input placeholder="请确认新密码">
        <app-err-msg *ngIf="confirmPassword?.touched && confirmPassword?.errors && !passwordsDiffer">
          {{ '确认新密码不能为空' }}
        </app-err-msg>
        <app-err-msg *ngIf="passwordsDiffer">
          两次输入密码不一致
        </app-err-msg>
      </div>
    </div>
    <div class="form-item">
      <label>验证码</label>
      <div class="ipt">
        <nz-input-group nzSearch [nzAddOnAfter]="suffixButton">
          <input formControlName="vCode" type="text" nz-input placeholder="请输入验证码" />
        </nz-input-group>
        <ng-template #suffixButton>
          <app-v-code [phone]="phone"></app-v-code>
        </ng-template>
        <app-err-msg *ngIf="vCode?.touched && vCode?.errors">
          {{ '验证码不能为空' }}
        </app-err-msg>
      </div>
    </div>
  </form>
</ng-template>